<template>
  <div class="divisional">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="inputBox">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="反馈码" name="first">
              <div class="v_box">
                <el-button size="small" type="primary" @click="addInfo">录入</el-button>
              </div>
              <el-table
                :data="FKList"
                :header-cell-style="{background:'LightYellow	',color:'black'}"
                max-height="400"
                style="width: 100%"
              >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="number" label="反馈代码" width></el-table-column>
                <el-table-column prop="chinese" label="中文释义"></el-table-column>
                <!-- <el-table-column prop="modifyTime" label="最大值"></el-table-column> -->
                <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="editInfo(scope.row)" type="primary" size="small">编辑</el-button>
                    <!-- <el-button @click="deleteinfo(scope.row)" type="primary" size="small">删除</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="失联原因" name="second">
              <div class="v_box">
                <el-button size="small" type="primary" @click="EditSL">重新选择</el-button>
              </div>

              <el-table
                :data="slList"
                :header-cell-style="{background:'LightYellow	',color:'black'}"
                max-height="400"
                style="width: 100%"
              >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="number" label="反馈代码" width></el-table-column>
                <el-table-column prop="chinese" label="中文释义"></el-table-column>
                <!-- <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="deleteinfo(scope.row)" type="primary" size="small">删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="停催原因" name="third">
              <div class="v_box">
                <el-button size="small" type="primary" @click="EditTC">重新选择</el-button>
              </div>

              <el-table
                :data="tcList"
                :header-cell-style="{background:'LightYellow	',color:'black'}"
                max-height="400"
                style="width: 100%"
              >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="number" label="反馈代码" width></el-table-column>
                <el-table-column prop="chinese" label="中文释义"></el-table-column>
                <!-- <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="deleteinfo(scope.row)" type="primary" size="small">删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <div class="pageBox">
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
    </div>
    <el-dialog class="speDialog" :visible.sync="IsEditNumbers" width="60%">
      <span slot="title">{{EditTT}}</span>
      <div class="mainInfoBox" ref="NUMBERSS">
        <template v-for="item in EditList" >
          <dd>
            <input type="checkbox"
                   class="selBtn"
                   name="businessregion"
                   :data-id="item.id"
                   :value="item.number"
                   v-model="item.checked"/>
            <label for="city4">{{item.chinese}}</label>
            <span>&nbsp;&nbsp;</span>
          </dd>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateEdit">保存</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog class="speDialog" :visible.sync="FKAdd" width="60%">
      <span slot="title">新增反馈码</span>
      <div class="mainInfoBox">
        <div class="infoBox">
          <label for>反馈代码:</label>
          <el-input v-model.trim="FKInfo.number" size="small" required placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>中文释义:</label>
          <el-input v-model.trim="FKInfo.chinese" size="small" required placeholder="请输入内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="saveInfo">保存</el-button>
        </span>
      </div>
    </el-dialog>

    <el-dialog class="speDialog" :visible.sync="FKEdit" width="60%">
      <span slot="title" >编辑反馈码</span>
      <div class="mainInfoBox">
        <div class="infoBox">
          <label for>反馈代码:</label>
          <el-input v-model.trim="FKInfo.number" size="small" disabled placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>中文释义:</label>
          <el-input v-model.trim="FKInfo.chinese" size="small" placeholder="请输入内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="saveInfo">保存</el-button>
        </span>
      </div>
    </el-dialog>

    <el-dialog class="speDialog" :visible.sync="isEdit" width="60%">
      <span slot="title">用户编辑</span>
      <div class="mainInfoBox">
        <div class="infoBox">
          <label for>用户名称:</label>
          <el-input v-model="roleName" size="small" placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>用户码:</label>
          <el-input v-model="roleName" size="small" placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>机构:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="infoBox"></div>
        <div class="infoBox">
          <label for>角色:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="infoBox">
          <label for>岗位:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="isEdit = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { cmcUrl } from "../../../static/baseUrl";
export default {
  data() {
    return {
      activeName: "first",
      isEdit: false,
      roleName: "",
      role: "",
      radio: "",
      isInfodetail: false,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      groupValue: "",
      lost: "",
      roleoptions: [
        {
          value: "1",
          label: "试试",
        },
        {
          value: "2",
          label: "三四十",
        },
      ],
      tableData: [],
      FKList:[],
      FKAdd: false,
      FKEdit: false,
      FKInfo: {},
      slInfo: {},
      tcInfo: {},
      slNumbers: [],
      tcNumbers: [],
      slList: [],
      tcList: [],
      EditTT: "",
      EditList: [],//用与编辑页面显示可用选项
      IsEditNumbers: false,
      EditNumbers_type: "",//编辑弹框的类型，1为失联，2为停催
    };
  },
  created() {
    this.checkInfo();
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.name == 'first'){
        console.log("first-----tab");
        this.checkInfo();
        //this.first();
      }else if(tab.name == 'second'){
        console.log("second-----tab");
        //this.second();
      }else if(tab.name == 'third'){
        console.log("third-----tab");
        //this.third();
      }
    },
    add() {
      this.isAdd = true;
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.checkInfo();
    },
    handleSizeChange(data) {
      console.log(data, "handleSizeChange");
      this.pageSize = data;
      this.checkInfo();
    },
    deleteinfo(val) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(data) {
      console.log(data, "sss");
      this.isEdit = true;
    },
    reset() {
      this.list_1[0].input_val = "";
      this.list_1[1].input_val = "";
    },
    checkInfo() {

      this.$axios({
        method: "get",
        url: `/CMC/feedBack/selectList`,
        data: "",
      })
        .then((res) => {
          if (res.code == 200) {
            this.FKList = res.data;
            //this.total = res.data.total;
            this.getSlAndTcNumbers()
          } else {
            Message.warning(res.message);
          }
          //console.log("this.FKList", this.FKList,"123");
        })
        .catch((err) => {});

    },
    addInfo(){

      this.FKAdd = true;
      this.FKInfo = {};
    },
    //编辑反馈码
    editInfo(data){
      //let obj = Object.assign([],data);

      this.FKInfo = JSON.parse(JSON.stringify(data));
      /* this.FKInfo.number = data.number;
      this.FKInfo.chinese = data.chinese;
      this.FKInfo.id = data.id; */
      console.log("编辑数据==",data);
      this.FKEdit = true;
    },
    //取消
    cancelEdit(){
      if(this.FKEdit){//修改
        this.FKEdit = false;
      }else if(this.FKAdd){//新增
        this.FKAdd = false;
      }

    },
    //保存反馈码
    saveInfo(){
      let url = "";
      if(this.FKEdit){//修改
        if(!this.FKInfo.chinese){
          Message.warning("请填写中文注释！");
          return;
        }
        url = `/CMC/feedBack/update`;
      }else if(this.FKAdd){//新增
        let isExist = false;
        if(!this.FKInfo.number){
          Message.warning("请填写反馈码！");
          return;
        }
        if(!this.FKInfo.chinese){
          Message.warning("请填写中文注释！");
          return;
        }
        Object.keys(this.FKList).forEach((item) => {
          let temInfo = this.FKList[item];
          if(temInfo.number==this.FKInfo.number.trim()){
            isExist = true;
          }
        })
        if(isExist){
          Message.warning("反馈码已存在，请重新填写！");
          return false;
        }
        url = `/CMC/feedBack/add`;
      }
      console.log("保存数据==",this.FKInfo);
      this.$axios({
        method: "put",
        url: url,
        data: this.FKInfo,
      })
        .then((res) => {
          console.log(res, "保存数据");
          if (res.code == 200) {
            Message.warning("数据保存成功！");
          } else {
            Message.warning(res.message);
          }
          //关闭页面
          if(this.FKEdit){//修改
            this.FKEdit = false;
          }else if(this.FKAdd){//新增
            this.FKAdd = false;
          }
          //刷新数据
          this.checkInfo();
        })
        .catch((err) => {});
    },
    //获取失联和停催的反馈码
    getSlAndTcNumbers(){
      this.$axios({
        method: "put",
        url: `/CMC/feedBackConfig/selectList`,
        data: "",
      })
        .then((res) => {
          if (res.code == 200) {
            this.slInfo = res.data.失联;
            this.tcInfo = res.data.停催;
            this.numberToInfo();
          } else {
            Message.warning(res.message);
          }
        })
        .catch((err) => {});
    },
    //将停催和失联的numbers,转为List<info>
    numberToInfo(){
      this.slList=[];
      this.tcList=[];

      this.slNumbers = this.slInfo.numbers.split(',');
      this.tcNumbers = this.tcInfo.numbers.split(',');

      if(this.FKList!=undefined && this.FKList.length>0){
        Object.keys(this.FKList).forEach((item) => {
          let tempInfo = this.FKList[item];
          let num = tempInfo.number;

          this.slNumbers.forEach(v=>{
            if(v===num){
              this.slList.push(tempInfo);
            }
          });

          this.tcNumbers.forEach(v=>{
            if(v===num){
              this.tcList.push(tempInfo);
            }
          });

        })

      }
    },
    //编辑失联原因
    EditSL(){
      this.EditNumbers_type = "1";
      this.EditTT = "选择失联原因";
      this.EditData();
    },
    //编辑停催原因
    EditTC(){
      this.EditNumbers_type = "2";
      this.EditTT = "选择停催原因";
      this.EditData();
    },
    //弹出失联原因|停催原因的弹出层
    EditData(){
      this.EditList = [];
      this.EditList.pop();
      //深复制，断开数据联动
      let tempList = Object.assign([],this.FKList);
      this.IsEditNumbers = true;
      this.EditList = tempList;
      //console.log("EditData..EditList==",this.EditList)
      let length = this.EditList.length;

      if(this.EditNumbers_type=='1'){//失联原因
        let tcNumbersLength = this.tcNumbers.length;
        for (let ii = 0; ii < length; ii++) {
          let tempInfo = this.EditList[ii];
          if(tempInfo==undefined){
            return;
          }
          this.$set(this.EditList[ii], "checked", false);
          let num = tempInfo.number;

          this.slNumbers.forEach(v=>{
            if(v===num){
              this.$set(tempInfo, "checked", "checked");
            };
          });

          for(let x = 0; x < tcNumbersLength; x++){
            let mm = this.tcNumbers[x];
            console.log("mm= = ",mm);
            if (num === mm) {
              this.EditList.splice(ii, 1);
              ii--;
            }
          }
        };
      }else if(this.EditNumbers_type=='2'){//停催原因
        let slNumbersLength = this.slNumbers.length;
        for (let ii = 0; ii < length; ii++) {
          let tempInfo = this.EditList[ii];
          if(tempInfo==undefined){
            return;
          }
          this.$set(this.EditList[ii], "checked", false);
          let num = tempInfo.number;

          this.tcNumbers.forEach(v=>{
            if(v===num){
              this.$set(this.EditList[ii], "checked", "checked");
            };
          });

          for(let x = 0; x < slNumbersLength; x++){
            let mm = this.slNumbers[x];
            if (num === mm) {
              this.EditList.splice(ii, 1);
              ii--;
            }
          }
        };
      }
      console.log("this.EditList= = ",this.EditList);
    },
    //保存更新，选中的反馈原因
    updateEdit(){
      let checks = this.$refs.NUMBERSS.getElementsByClassName("selBtn");
      let selectedArr = [];

      for(let i=0;i<checks.length;i++){
        if(checks[i].checked){
          selectedArr.push(checks[i].value);
        }
      };
      let numbers = selectedArr.toString();
      let URL = "";
      let option = {};
      if(this.EditNumbers_type=='1'){
        this.$set(this.slInfo, "numbers", numbers);
        option = this.slInfo;
      }else if(this.EditNumbers_type=='2'){
        this.$set(this.tcInfo, "numbers", numbers);
        option = this.tcInfo;
      };

      this.$axios({
        method: "put",
        url: `/CMC/feedBackConfig/update`,
        data: option,
      })
        .then((res) => {
          console.log(res, "更新数据");
          if (res.code == 200) {
            Message.warning("保存成功！");
          } else {
            Message.warning(res.message);
          }
        })
        .catch((err) => {});
      //更新数据，关闭页面
      this.checkInfo();
      this.IsEditNumbers = false;
    },
  },

};
</script>

<style lang="scss" scoped>
.divisional {
  /deep/ .el-row:nth-child(1) {
    width: 100%;
    height: 90vh;
    // background: pink;
    padding: 0;
    margin: 0;
    .el-col {
      padding: 0;
      height: inherit;
      border: 1px solid slategrey;
      box-sizing: border-box;
      overflow: hidden;
      div:nth-child(1) {
      }
    }
  }
  .pageBox {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  /deep/ .el-dialog {
    .mainInfoBox {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      box-sizing: border-box;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          display: inline-block;
          margin-right: 4px;
        }
        .el-input {
          width: 60%;
        }
      }
    }
  }
  .speDialog {
    .mainInfoBox {
      width: 100%;
      height: 30vh;
      padding-left: 20px;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          min-width: 60px;
          text-align: right;
          display: inline-block;
          margin-right: 4px;
        }
        .el-input {
          width: 55%;
        }
      }
    }
  }
}
</style>
